

<template>
  <div class="user-page">
    <div class="user-container">
      <div class="header">
        <h1 class="title">用户信息中心</h1>
        <div class="action-buttons">
          <el-button type="primary" @click="getUserInfo" class="action-btn">
            <i class="el-icon-user"></i> 获取当前用户信息
          </el-button>
          <el-button type="success" @click="getAllUserInfo" class="action-btn">
            <i class="el-icon-s-custom"></i> 获取所有用户信息
          </el-button>
          <el-button type="danger" @click="logout" class="action-btn">
            <i class="el-icon-switch-button"></i> 退出登录
          </el-button>
        </div>
      </div>
      
      <!-- 登录用户信息 -->
      <el-card class="info-card" v-if="userInfo.length > 0">
        <template #header>
          <div class="card-header">
            <h3>当前登录用户信息</h3>
          </div>
        </template>
        <el-table :data="userInfo" class="data-table" :stripe="true" :border="true">
          <el-table-column property="userName" label="用户名"></el-table-column>
          <el-table-column property="userPassword" label="密码" width="450" show-overflow-tooltip></el-table-column>
          <el-table-column property="age" label="年龄" width="80"></el-table-column>
          <el-table-column property="job" label="工作"></el-table-column>
          <el-table-column property="roles" label="权限组"></el-table-column>
        </el-table>
      </el-card>
      
      <!-- 所有用户信息 -->
      <el-card class="info-card" v-if="allUserInfo.length > 0">
        <template #header>
          <div class="card-header">
            <h3>所有用户信息</h3>
          </div>
        </template>
        <el-table :data="allUserInfo" class="data-table" :stripe="true" :border="true">
          <el-table-column property="userName" label="用户名"></el-table-column>
          <el-table-column property="userPassword" label="密码" width="450" show-overflow-tooltip></el-table-column>
          <el-table-column property="age" label="年龄" width="80"></el-table-column>
          <el-table-column property="job" label="工作"></el-table-column>
          <el-table-column property="roles" label="权限组"></el-table-column>
        </el-table>
      </el-card>
      
      <div class="empty-state" v-if="userInfo.length === 0 && allUserInfo.length === 0">
        <i class="el-icon-info"></i>
        <p>暂无用户数据，请点击上方按钮获取信息</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios  from "../utils/axios.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import router from "../router/index.js";

const userInfo = ref([])
const allUserInfo = ref([])



const getUserInfo = () => {
  axios.get("/getUserInfo").then(res => {
    console.log("res",res)
    if (res.code === 2000) {
      ElMessage.success(res.msg);
      const user = [res.data]
      userInfo.value= user;
    } else {
      ElMessage.error(res.msg);
    }
  })
}

const getAllUserInfo = () => {
  axios.get("/getAllUserInfo").then(res => {
    console.log("res",res)
    if (res.code === 2000) {
      ElMessage.success(res.msg);
      const users = res.data
      allUserInfo.value= users;
    } else {
      ElMessage.error(res.msg);
    }
  })
}

const logout = ()=>{
  axios.post('/logout').then((res) => {
    console.log(res)
    if  (res.code==2000){
      ElMessage.success("退出登录成功！")
      router.push('/login')
    }else {
      ElMessage.error("退出登录失败！")
    }
  })
}

</script>

<style scoped>
.user-page {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.user-container {
  width: 100%;
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 30px 20px;
  box-sizing: border-box;
  animation: fadeIn 0.8s ease-in-out;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 20px;
}

.title {
  color: #2c3e50;
  font-size: 28px;
  font-weight: 600;
  margin: 0;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.action-btn {
  border-radius: 8px;
  padding: 10px 16px;
  transition: all 0.3s;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.info-card {
  margin-bottom: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3 {
  margin: 0;
  color: #2c3e50;
  font-weight: 600;
}

.data-table {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.empty-state i {
  font-size: 48px;
  color: #95a5a6;
  margin-bottom: 20px;
}

.empty-state p {
  font-size: 18px;
  color: #7f8c8d;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .action-buttons {
    width: 100%;
    justify-content: center;
  }
  
  .action-btn {
    flex: 1;
  }
}
</style>